import React, { memo, useEffect, useState } from 'react'
import { RightWrapper } from './style'
import IconGlobal from '@/assets/svg/icon-global'
import IconAvatar from '@/assets/svg/icon-avatar'
import IconHamburg from "@/assets/svg/icon-hamburg"

const HeaderRight = memo(() => {
  const [ showPopupPanel, setShowPopupPanel ] = useState(false)

  function profileClickHandle() {
    setShowPopupPanel(true)
  }
  
  useEffect(() => {

    function windowClickHandle() {
      setShowPopupPanel(false)
    }
    // true 表示在事件捕获阶段处理事件
    window.addEventListener("click", windowClickHandle, true)

    return() => {
      window.removeEventListener("click", windowClickHandle)
    }
  },[])

  return (
    <RightWrapper>
      <div className="btns">
        <span>登录</span>
        <span>注册</span>
        <span>
          <IconGlobal />
        </span>
      </div>
      <div className="profile" onClick={profileClickHandle}>
        <IconHamburg />
        <IconAvatar />
        {
          showPopupPanel && (
          <div className="popup-panel">
            <div className="top">
              <div className="popup-panel-item">注册</div>
              <div className="popup-panel-item">登录</div>
            </div>
            <div className="bottom">
              <div className="popup-panel-item">出租房源</div>
              <div className="popup-panel-item">开展体验</div>
              <div className="popup-panel-item">帮助</div>
            </div>
          </div>
          )
        }
      </div>
    </RightWrapper>
  )
})

export default HeaderRight